import React, { Suspense } from "react";
import { Card, Tabs, Tooltip } from "antd";
import { connect } from "dva";
import RobotSetUp from "@/pages/Account/robotSetup/index";
import BackRouter from "./backRouter";
import AccessSettings from "@/pages/Account/accessSettings/index";
import KnowledgeConfiguration from "@/pages/robotManagement/KnowledgeConfiguration";
import HotConfiguration from "@/pages/robotManagement/hotSpots";
import QuickEntry from "@/pages/robotManagement/quickEntry";
import BottomLabel from "@/pages/robotManagement/bottomLabel";
import ChannelSetting from "@/pages/robotManagement/ChannelSetting";
// import AppearanceSettings from "./AppearanceSettings";
import AppearanceSettings from "./appearanceSettings/index";

import ChannnelSettingMenu from "./channelSetting/menu";
import styles from "./robotEdit.less";
import BasicSetting from "./basicSetting";
import InlineSetting from "./inlineSetting";
import RobotSetting from "./robotSetting/index";
import Transfer from "./transfer";
import TerminalList from "./terminalList";
import ModelList from "@/pages/LargeModelCenter/LanguageModel/InRobot/list";
import InstructList from "./instructList";
import UserSession from "@/UserSession";

import UserProfile from "../UserProfile";
import AssistantList from "./assistantList";
import WorkOrderSetting from "./workOrderSetting";

import { formatMessage } from 'umi-plugin-react/locale';

const { TabPane } = Tabs;

class RobotEdit extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			type: "1",
			channel: "web",
		};
	}

	componentDidMount() {
		const { dispatch } = this.props;

		dispatch({
			type: "global/changeLayoutCollapsed",
			payload: true,
		});
	}

	changeTab = (key) => {
		this.setState({ type: key }, () => {
			switch (key) {
				case "2":
					this.AppearanceSettings.getInfo();
					break;
				case "4":
					this.KnowledgeConfiguration.getKnowledgeList();
					break;
				case "8":
					
					break;
				case "9":
					this.TerminalList.getList();
					break;
				case "10":
					this.ModelList.getList();
					break;
				case "11":
					this.InstructList.getList();
					break;
				case "13":
					this.AssistantList.getList();
					break;
        case "14":
					this.WorkOrderSetting.getInfo();
					break;
			}
		});
	};

	handleClick = (e) => {
		this.setState({ channel: e.key });
	};

	renderMenuText = (title) => {
		return <div style={{ width: 200, textAlign: "left" }}>{title}</div>;
	};

	render() {
		const { query } = this.props.location;
		const { type, channel } = this.state;
		const { match: { params: { id } }, location: { query: { platform, applicationId, moduleList, isllmCustom, loginType } } } = this.props;

		return (
			<Card className={styles.editCard} bordered={false} style={{ height: '100%' }} bodyStyle={{ height: '100%' }}>
				{
					type != 10 ? (
						<div style={{ position: "absolute", right: 20, top: 16, zIndex: 2 }}>
							<BackRouter pathname='/enterprise/robotManagement'></BackRouter>
						</div>
					) : ''
				}

				<Tabs activeKey={type} className={styles.robotSetMenu} onChange={this.changeTab} tabPosition={"left"} style={{ height: '100%' }} tabBarStyle={{ width: 170 }}>
					<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.applicationSettings' }))} disabled key='0'></TabPane>
					<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.basicSettings' }))} key='1'>
						<div className={styles.title}>
							<span>{formatMessage({ id: 'robotEdit.basicSettingsTitle' })}</span>
						</div>
						<BasicSetting robotId={id} channel={platform} applicationId={applicationId} />
					</TabPane>
          <TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.loginAddress' }))} key='15'>
            <div className={styles.title}>
              <span>{formatMessage({ id: 'robotEdit.loginAddressTitle' })}</span>
            </div>
            <ChannelSetting 
              onRef={ref => this.ChannelSetting = ref}
              robotId={id}
              channel={platform}
              applicationId={applicationId}
              openInfoModal={this.openInfoModal}
              moduleTicket={null}
            />
          </TabPane>
					<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.knowledgeSettings' }))} key='4'>
						<div className={styles.title}>
							<span>{formatMessage({ id: 'robotEdit.knowledgeSettingsTitle' })}</span>
						</div>
						<KnowledgeConfiguration
							robotId={id}
							onRef={(ref) => (this.KnowledgeConfiguration = ref)}
							applicationId={applicationId}
						/>
					</TabPane>
					{
						platform != 'DIGITAL_SCREEN' ? (
							<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.incomingLineSettings' }))} key="01">
								<div className={styles.title}>
									<span>{formatMessage({ id: 'robotEdit.incomingLineSettingsTitle' })}</span>
								</div>
								<InlineSetting channel={platform} isllmCustom={isllmCustom} applicationId={applicationId} moduleList={moduleList} loginType={loginType} />
							</TabPane>
						) : null
					}

					<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.robotSettings' }))} key="02">
						<div className={styles.title}>
							<span>{formatMessage({ id: 'robotEdit.robotSettings' })}</span>
						</div>
						<RobotSetting robotId={id} channel={platform} applicationId={applicationId} moduleList={moduleList} />
					</TabPane>
					{
						moduleList.indexOf("kefu") != -1 ? (
							<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.transferToHumanSettings' }))} key="03">
								<div className={styles.title}>
									<span>{formatMessage({ id: 'robotEdit.transferToHumanSettingsTitle' })}</span>
								</div>
								<Transfer robotId={id} channel={platform} applicationId={applicationId} />
							</TabPane>
						) : null
					}
					
					{
						platform == 'DIGITAL_SCREEN' ? (
							<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.terminalManagement' }))} key='9'>
								<div className={styles.title}>
									<span>{formatMessage({ id: 'robotEdit.terminalManagementTitle' })}</span>
								</div>
								<TerminalList robotId={id} applicationId={applicationId} onRef={ref => this.TerminalList = ref} />
							</TabPane>
						) : null
					}
					{
						isllmCustom == 1 ? (
							<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.instructionConfiguration' }))} key='11'>
								<InstructList applicationId={applicationId} onRef={ref => this.InstructList = ref} />
							</TabPane>
						) : null
					}
					{
						UserSession.hasLargeLanguage() ? (
							<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.modelConfiguration' }))} key='10'>
								<ModelList applicationId={applicationId} onRef={ref => this.ModelList = ref} />
							</TabPane>
						) : null
					}
					<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.userConfiguration' }))} key='12'>
						<UserProfile applicationId={applicationId} />
					</TabPane>
					{
						isllmCustom == 1 ? (
							<TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.aiConsultation' }))} key='13'>
								<AssistantList applicationId={applicationId} onRef={ref => this.AssistantList = ref} />
							</TabPane>
						) : null
					}
          {
            UserSession.hasWorkOrder() ? (
              <TabPane tab={this.renderMenuText(formatMessage({ id: 'robotEdit.workOrderConfiguration' }))} key='14'>
                <div className={styles.title}>
                  <span>{formatMessage({ id: 'robotEdit.workOrderConfigurationTitle' })}</span>
                </div>
                <WorkOrderSetting applicationId={applicationId} onRef={ref => this.WorkOrderSetting = ref}  />
              </TabPane>
            ) : ''
          }
          
				</Tabs>
			</Card>
		);
	}
}

export default connect()(RobotEdit);
